<template>
  <div id="reportpdf" class="view-container">
    <div class="title">
      <span v-if="reportInfo.type === 0">检查报告</span>
      <span v-else>验房报告</span>
    </div>
    <div class="flex-row" style="margin-bottom:40px;">
      <div class="address" style="margin-right:20px;">{{ reportInfo.address }}</div>
      <div ref="download" class="red download" @click="getPDF">下载报告</div>
    </div>
    <div>检查日期：<span class="greyer">{{ dateFormat(reportInfo.checkDate) }}（{{ formatWeekday(reportInfo.checkDate) }}）</span></div>
    <div>租赁起始日期：<span v-if="reportInfo.beginDate" class="greyer">{{ dateFormat(reportInfo.beginDate) }}（{{ formatWeekday(reportInfo.beginDate) }}）</span><span>--</span></div>
    <div>租赁截止日期：<span v-if="reportInfo.endDate" class="greyer">{{ dateFormat(reportInfo.endDate) }}（{{ formatWeekday(reportInfo.endDate) }}）</span><span>--</span></div>
    <div>租客：<span class="greyer">{{ reportInfo.userName }}</span></div>
    <div>租金：<span class="amount">$ {{ reportInfo.rentFee }}</span></div>
    <div class="subtitle bottom-line">概述</div>
    <div class="remark">{{ reportInfo.remark }}</div>
    <div v-if="reportInfo.filePath" class="images-wrap">
      <div v-for="(item, index) in fileList" :key="index" class="image-wrap">
        <img :src="item+'?'+new Date().getTime()" :alt="item" crossOrigin="anonymous">
      </div>
    </div>
    <div class="bill-bg-1" />
    <div class="bill-bg-2" />
  </div>
</template>

<script>
import { getReport } from '@/api/report'
import { dateFormat, formatMonth, formatWeekday, getFileSuffixSimple } from '@/utils/common'

export default {
  data() {
    return {
      dateFormat,
      formatMonth,
      formatWeekday,
      id: this.$route.query.id || null,
      type: +this.$route.query.type || 0,
      reportInfo: {},
      fileList: []
    }
  },
  created() {
    if (this.id) {
      this._getReport(this.id)
    }
  },
  methods: {
    _getReport(id) {
      getReport(id).then(response => {
        this.reportInfo = response.data || {}
        if (this.reportInfo.filePath) {
          const _fileList = this.reportInfo.filePath.split(',')
          this.fileList = _fileList.filter(item => {
            let fileSuffix = getFileSuffixSimple(item)
            fileSuffix = fileSuffix.toLowerCase()
            return ['png', 'jpg', 'jpeg'].includes(fileSuffix)
          })
        }
      })
    },
    getPDF() {
      const downloadTag = this.$refs.download
      const type = this.reportInfo.type === 0 ? '检查报告' : '验房报告'
      const title = `${this.reportInfo.address}_${dateFormat(this.reportInfo.checkDate)}_${type}`
      downloadTag.style.color = 'white'
      this.getPdf('reportpdf', title)
      downloadTag.style.color = 'red'
    }
  }
}
</script>

<style lang="scss" scoped>
.view-container {
  position: relative;
  margin: 0 auto;
  padding: 80px 100px;
  width: 1200px;
  font-size: 16px;
  font-weight: bold;
  color: #909399;
  line-height: 28px;
}

.bill-bg-1 {
  position: absolute;
  top: 0;
  right: 50px;
  width: 200px;
  height: 400px;
  background: url('../../assets/images/bg-1.png') center center no-repeat;
  background-size: contain;
}

.bill-bg-2 {
  position: absolute;
  bottom: 0;
  left: 50px;
  width: 200px;
  height: 400px;
  background: url('../../assets/images/bg-2.png') center center no-repeat;
  background-size: contain;
}

.title {
  margin-bottom: 20px;
  font-size: 28px;
  font-weight: bolder;
  color: black;
  line-height: 40px;
}

.download {
  flex-shrink: 0;
  color: red;
  font-weight: normal;
  text-decoration: underline;
  cursor: pointer;
  z-index: 500;
}

.address {
  min-width: 400px;
}

.bottom-line {
  line-height: 28px;
  margin: 20px 0;
  border-bottom: 1px solid #DCDFE6;
}

.greyer {
  color: #606266;
}

.amount {
  color: #5AC6B7;
}

.subtitle {
  font-size: 20px;
  color: black;
  font-weight: bolder;
  line-height: 38px;
}

.remark {
  white-space: pre-line;
  min-height: 100px;
}

.images-wrap {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}

.image-wrap {
  margin: 0 10px 10px 0;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    // height: 100%;
    width: 100%;
    // object-fit: contain;
  }
}
</style>
